<template>

    <el-dialog
            top="20px"
            :title="defaultValue.title"
            :visible="tableConfig.show"
            @close="tableConfig.show = false"
            :show-close="tableConfig.showClose"
            :destroy-on-close="tableConfig.destroyOnClose"
            width="1100px">



      <el-row :gutter="0" style="display: flex">
        <el-col :span="3" >
          <div class="imgBox">
            <el-image class="icoHeadUserImage" fit="contain" :src="obj.icoUrl || require('@/assets/images/ico/avatar12.png')" />
          </div>
        </el-col>
        <el-col :span="21">
          <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>
            <el-descriptions-item label="姓名">{{obj.name}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{obj.sex}}</el-descriptions-item>
            <el-descriptions-item label="年龄说明">{{obj.age}}</el-descriptions-item>
            <el-descriptions-item label="组织层级">{{obj.levelCh}}</el-descriptions-item>
            <el-descriptions-item label="干系人类型">{{obj.stakeholderType}}</el-descriptions-item>
            <el-descriptions-item label="组织角色/职位">{{obj.orgRole}}</el-descriptions-item>
            <el-descriptions-item label="项目内角色">{{obj.projectRoleCh}}</el-descriptions-item>
            <el-descriptions-item label="数据创建时间">{{obj.createTime}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-divider content-position="center"><p style="color: #FF7043">联系与可达性</p></el-divider>


      <el-row style="">
        <el-col :span="24">
            <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>
                <el-descriptions-item label="邮箱(联系与可达性-start)">{{obj.email}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{obj.phone}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
      </el-row>

      <el-divider content-position="center"><p style="color: #FF7043">利益与影响</p></el-divider>

      <el-row style="">
        <el-col :span="24">
          <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>
            <el-descriptions-item label="核心利益点">{{obj.benefitPoint}}</el-descriptions-item>
            <el-descriptions-item label="利益类别">{{obj.benefitClassCh}}</el-descriptions-item>
            <el-descriptions-item label="正向/负向影响">
              <el-tag type="warning" size="mini" v-if="obj.influenceTrend === 1">正向</el-tag>
              <el-tag type="info" size="mini" v-else-if="obj.influenceTrend === 0">负向</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="影响领域">{{obj.influenceFieldCh}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-divider content-position="center"><p style="color: #FF7043">权力–利益矩阵</p></el-divider>

      <el-row style="">
        <el-col :span="24">
          <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>
            <el-descriptions-item label="权力级别">
              <el-tag type="danger" size="mini" v-if="obj.rightLevel === 'high'">高</el-tag>
              <el-tag type="success" size="mini" v-else-if="obj.rightLevel === 'middle'">中</el-tag>
              <el-tag type="info" size="mini" v-else-if="obj.rightLevel === 'low'">低</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="利益级别">
              <el-tag type="danger" size="mini" v-if="obj.interestLevel === 'high'">高</el-tag>
              <el-tag type="success" size="mini" v-else-if="obj.interestLevel === 'middle'">中</el-tag>
              <el-tag type="info" size="mini" v-else-if="obj.interestLevel === 'low'">低</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="利益象限">{{obj.interestQuadrantCh}}</el-descriptions-item>
            <el-descriptions-item label="当前支持度">
              <el-tag size="mini" v-if="obj.supportId === 5">完全支持 (5)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === 4">非常支持 (4)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === 3">比较支持 (3)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === 2">略微支持 (2)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === 1">轻微支持 (1)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === 0">中立 (0)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === -1">轻微反对 (-1)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === -2">略微反对 (-2)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === -3">比较反对 (-3)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === -4">非常反对 (-4)</el-tag>
              <el-tag size="mini" v-if="obj.supportId === -5">完全反对 (-5)</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-divider content-position="center"><p style="color: #FF7043">沟通管理</p></el-divider>


      <el-row style="">
        <el-col :span="24">
          <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>
            <el-descriptions-item label="沟通目标">{{obj.interactTargetCh}}</el-descriptions-item>
            <el-descriptions-item label="沟通频次">{{obj.interactFrequencyCh}}</el-descriptions-item>
            <el-descriptions-item label="沟通方式">{{obj.interactFormatCh}}</el-descriptions-item>
            <el-descriptions-item label="沟通负责人">{{obj.interactPerson}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-divider content-position="center"><p style="color: #FF7043">约束与依赖</p></el-divider>


      <el-row style="">
        <el-col :span="24">
          <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>
            <el-descriptions-item label="对干系人的依赖">{{obj.dependentOneselfCh}}</el-descriptions-item>
            <el-descriptions-item label="干系人对项目的依赖">{{obj.dependentProjectCh}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>


      <el-divider content-position="center"><p style="color: #FF7043">文化与个人画像</p></el-divider>



      <el-row style="">
        <el-col :span="24">
          <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>
            <el-descriptions-item label="决策风格">{{obj.decisionStyleCh}}</el-descriptions-item>
            <el-descriptions-item label="个人动机">{{obj.motivationCh}}</el-descriptions-item>
            <el-descriptions-item label="个人忌讳/雷区">{{obj.taboo}}</el-descriptions-item>
            <el-descriptions-item label="学历">{{obj.education}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
        </span>

    </el-dialog>

</template>

<script>

import {getFullDate, getFullTime} from "@/utils/utils";
import http from '@/utils/http'

export default {
  name: "OpsStakeholderDetailed",
  data(){
    return {
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '详情',
      },
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        showClose: true,
      },
      // 列表的尺寸
      size: 'small',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 展示的数据
      obj: {
        id: null,
        siteId: null,
        ico: null,
        name: null,
        sex: null,
        age: null,
        level: null,
        stakeholderType: null,
        orgRole: null,
        projectRole: null,
        email: null,
        phone: null,
        benefitPoint: null,
        benefitClass: null,
        influenceTrend: null,
        influenceField: null,
        rightLevel: null,
        interestLevel: null,
        interestQuadrant: null,
        supportId: null,
        interactTarget: null,
        interactFrequency: null,
        interactFormat: null,
        interactPerson: null,
        dependentOneself: null,
        dependentProject: null,
        decisionStyle: null,
        motivation: null,
        taboo: null,
        education: null,
        updateTime: null,
        updateId: null,
        createTime: null,
        createId: null,
        delType: null,
      },
      // 描述列表的css
      CS: {
        // 'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 描述列表的css
      LS: {
        // 'color': '#000',
        // 'text-align': 'center',
        'font-weight': '600',
        // 'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
    }
  },
  methods: {
    /**
     * 渲染图片
     * 只能这样做，图片这里不支持非固定地址返回
     * @param item 目标数据
     */
    getImageUrlInfo(item) {
      if (!item || !item.ico || item.ico === 'null') {
        // 判空或无效，直接显示默认图
        this.$set(item, 'icoUrl', null);
        return;
      }

      http.getImageUrl(item.ico)
        .then(url => {
          // 异步赋值，触发响应式更新
          this.$set(item, 'icoUrl', url);
        })
        .catch(() => {
          // 下载失败 fallback 默认图
          this.$set(item, 'icoUrl', null);
        });
    },
    /**
     * 打开弹出框
     * @param obj 人员信息
     */
    init(obj){
      this.obj = obj
      this.getImageUrlInfo(this.obj)
      this.tableConfig.show = true
    },
    /**
     * 转换时间戳为时间格式
     */
    getTime(item){
      return getFullTime(item)
    },
    /**
     * 时间转日期
     * @param item 要转换的时间戳
     * @return {string}
     */
    getFullDate(item){
      return getFullDate(item)
    },
  },
}
</script>

<style scoped>

</style>


